import { _decorator, Button, Label, Node, ScrollView } from 'cc';
import { ScrollList } from '../../../frame/component/scroll.list';
import { BasePopUp } from '../../../frame/component/ui.pop-up';
import Config from '../../manager/config.manager';
import GameDC from '../../manager/data.game.center';
import GameAssets from '../../manager/game.assets';
import type { Popup } from '../page/popup';
const { ccclass, property } = _decorator;

@ccclass('Rank')
export class Rank extends BasePopUp<typeof Popup, null> {
	@property(ScrollView)
	private scroll_view: ScrollView = null;
	@property(ScrollList)
	private scroll_list: ScrollList = null;

	protected default_return: null;

	protected initAfterOnLoad(){
		this.renderLocalUI();
		this.scroll_list.onRenderItem(this.renderItem.bind(this));
	}

	protected _click_event_: { [name: string]: (this: Rank, button: Button) => void; } = {
		close(btn){
			btn.interactable = false;
			BasePopUp.jelly_leave(this.node).then(()=>{
				this.close(null);
				btn.interactable = true;
			});
		}
	}

	public onShow(){
		this.scroll_list.setDataList(GameDC.RankList, 'place');
		this.scroll_view.scrollToTop(0.05);

		BasePopUp.jelly_enter(this.node);
	}

	private renderLocalUI(){
		let head_container = this.node.getChildByName('head-container');
		(<const>[
			['rank', 48],
			['nickname', 49],
			['round', 50],
			['free', 51]
		]).forEach(([name, idx])=>{
			head_container.getChildByName('lbl-'+name).getComponent(Label).string = GameAssets.getLangText(idx);
		});

		this.node.getChildByName('lbl-head').getComponent(Label).string = GameAssets.getLangText(47);
	}

	private renderItem(item: Node, data: typeof GameDC.RankList[number], node_cache: Map<Node, _RankNodeCache_>){
		let cache = node_cache.get(item);
		if(!cache){
			cache = this.createNodeCache(item);
			node_cache.set(item, cache);
		}

		[cache.rank1, cache.rank2, cache.rank3, cache.lbl_rank.node].forEach(el=>el.active = false);

		if(data.place<=3){
			[cache.rank1, cache.rank2, cache.rank3][data.place-1].active = true;
		}else{
			cache.lbl_rank.node.active = true;
			cache.lbl_rank.string = data.place.toString();
		}

		cache.lbl_nickname.string = data.nickname;
		cache.lbl_round.string = data.round.toString();
		cache.lbl_symbol.string = Config.symbolString(data.symbol);

		cache.background.active = (data.place%2)==1;
	}

	private createNodeCache(node: Node): _RankNodeCache_ {
		return {
			background: node.getChildByName('background'),
			rank1: node.getChildByName('icon-rank1'),
			rank2: node.getChildByName('icon-rank2'),
			rank3: node.getChildByName('icon-rank3'),
			lbl_rank: node.getChildByName('lbl-rank').getComponent(Label),
			lbl_nickname: node.getChildByName('lbl-nickname').getComponent(Label),
			lbl_round: node.getChildByName('lbl-round').getComponent(Label),
			lbl_symbol: node.getChildByName('lbl-free').getComponent(Label)
		}
	}
}

type _RankNodeCache_ = {
	background: Node;
	rank1: Node;
	rank2: Node;
	rank3: Node;
	lbl_rank: Label;
	lbl_nickname: Label;
	lbl_round: Label;
	lbl_symbol: Label;
}

